<template>  
    <div class="container">  
      <el-table  
        :data="tableData"  
        style="width: 100%"  
        row-key="id"  
        border  
      >  
        <el-table-column prop="name" label="Name" width="180"></el-table-column>  
        <el-table-column prop="email" label="Email"></el-table-column>  
      </el-table>  
    </div>  
  </template>  
  
  <script>  
  export default {  
    data() {  
      return {  
        tableData: [  
          {  
            id: 1,  
            name: 'John Smith',  
            email: 'john.smith@example.com',  
            children: [  
              {  
                id: 2,  
                name: 'John Jr.',  
                age: 16,  
                address: '123 Main St',
                children: [  
                  {  
                    id: 41,  
                    name: 'Jimmy Smith',  
                    age: 8,  
                    address: '456 Elm St'  
                  }  
                ]
              },  
              {  
                id: 3,  
                name: 'Jane Smith',  
                age: 14,  
                address: '456 Elm St'  
              }  
            ]  
          },  
          {  
            id: 4,  
            name: 'Jane Doe',  
            email: 'jane.doe@example.com',  
            children: [  
              {  
                id: 5,  
                name: 'Sam Doe',  
                age: 10,  
                address: '789 Oak St'  
              }  
            ]  
          }  
        ]  
      };  
    }  
  };  
  </script>  
  
  <style scoped>  
    .container{
        padding: 50px;
    }
  </style>